<template>
  <t-modal
    title="关联模型"
    width="1600px"
    :visible="visible"
    @cancel="closeModal()"
    wrapClassName="association-model-container"
    v-bind="footer"
    forceRender
    :zIndex="2000"
  >
    <div class="association-body-container">
      <!-- 模型列表 -->
      <div class="association-tree-body">
        <div class="tree-header">模型列表</div>
        <div class="tree-search">
          <a-input-search
            v-model="keyWord"
            style="width: 100%"
            placeholder="请输入关键字"
            @search="filterTreeData()"
          />
        </div>
        <div class="tree-warp">
          <a-spin :spinning="spinning">
            <a-empty v-if="treeData.length == 0" :description="false" />
            <a-tree
              v-else
              show-icon
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeys"
              :tree-data="treeData"
              @expand="onExpand"
              @select="onSelect"
              :replaceFields="{
                children: 'subNodes',
                title: 'nodeName',
                key: 'nodeId',
              }"
            >
              <!-- 自定义图标 -->
              <template slot="custom" slot-scope="{ subNodes, selected }">
                <icon-font
                  :class="[selected && 'checked']"
                  :type="
                    subNodes.length > 0 ? 'icon-wenjianjia-' : 'icon-a-moxing1'
                  "
                />
              </template>
              <template slot="title" slot-scope="{ nodeName, selected }">
                <span :title="nodeName" :class="[selected && 'checked']">
                  {{ nodeName }}
                </span>
                <div class="operate-icon">
                  <a-radio :checked="selected"></a-radio>
                </div>
              </template>
            </a-tree>
          </a-spin>
        </div>
        <div class="bottom-btn active-btn">构件查询</div>
      </div>
      <!-- bim -->
      <div class="association-model-body">
        <div class="association-BlackHole-container">
          <canvas
            oncontextmenu="event.preventDefault()"
            ref="associationModelCanvas"
          ></canvas>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <div class="association-footer-container">
      <a-button type="default" @click="closeModal()">取消 </a-button>
      <a-button type="primary">
        关联模型
      </a-button>
    </div>
  </t-modal>
</template>

<script>
//关联模型
import { addAttributeByKey } from "@/utils/util.js";
import { Icon } from "ant-design-vue";
import iconfrontjs from "@/assets/IconFont/iconfont.js";
const iconFrontUrl = iconfrontjs;
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl,
});
import { getModalTreeById } from "@/api/bim";
export default {
  name: "associationModel",
  inject: ["currentProject", "sceneSource"],
  components: {
    IconFont,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    footer: {
      type: Object,
      default() {
        return {
          footer: null,
        };
      },
    },
  },
  data() {
    return {
      keyWord: "",
      expandedKeys: [],
      autoExpandParent: true,
      selectedKeys: [],
      treeData: [],
      spinning: false,
      //
      BlackHole3D: null,
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        }
      },
      immediate: true,
    },
  },
  methods: {
    //请求属性数据
    getData() {
      this.spinning = true;
      return new Promise((resolve, reject) => {
        let { foreignUuid } = this.currentProject();
        if (!foreignUuid) {
          return;
        }
        getModalTreeById({ projId: foreignUuid })
          .then((res) => {
            let tree = [res?.data] ?? [];
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              tree,
              "subNodes"
            );
            this.treeData = filterData;
            this.expandedKeys = [res?.data?.nodeId];
            resolve();
          })
          .catch((_) => {
            this.treeData = [];
            this.expandedKeys = [];
            reject();
          })
          .finally((_) => {
            this.spinning = false;
          });
      });
    },

    //树展开
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },

    //树选择
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys;
      let {} = info.node.dataRef;
    },

    //搜索
    filterTreeData() {},

    closeModal() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.association-model-container {
  .ant-modal-body {
    padding: 0 !important;
  }
  .association-body-container {
    padding: 14px;
    box-sizing: border-box;
    height: 742px;
    overflow: hidden;
    display: flex;
    .association-tree-body {
      width: 300px;
      height: 100%;
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid #d9d9d9;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 0 0 16px 0;
      .tree-header {
        border-radius: 6px 6px 0px 0px;
        padding: 10px 16px;
        background: #f0f0f0;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #333333;
      }
      .tree-search {
        flex-shrink: 0;
        padding: 16px;
        position: relative;
      }
      .tree-warp {
        flex: 1;
        padding: 0 10px 10px 10px;
        overflow: auto;
        overflow-x: hidden;
        position: relative;
        .ant-tree {
          li {
            width: 100%;
            .ant-tree-node-content-wrapper {
              position: relative;
              width: calc(100% - 34px);
              padding: 0 5px 0 0;
              .ant-tree-iconEle {
                color: #f3ab1f;
                font-size: 16px;
                .checked {
                  color: #1677ff;
                }
              }
              .ant-tree-node-selected {
                color: red;
              }
              .ant-tree-title {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
                max-width: calc(100% - 40px);
                .checked {
                  color: #1677ff;
                }
                .operate-icon {
                  position: absolute;
                  top: 50%;
                  right: 0;
                  transform: translateY(-50%);
                }
              }
            }
          }
        }
        .ant-spin-nested-loading {
          height: 100%;
          .ant-spin {
            max-height: 100%;
          }
          .ant-spin-container {
            height: 100%;
          }
        }
        .ant-empty {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .bottom-btn {
        cursor: pointer;
        margin: 0 16px;
        width: 268px;
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        border: 1px dashed #d9d9d9;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #d9d9d9;
        text-align: center;
        line-height: 32px;
        &.active-btn {
          border-color: #1677ff;
          color: #1677ff;
        }
      }
    }
    .association-model-body {
      flex: 1;
      padding-left: 10px;
      .association-BlackHole-container {
        height: 100%;
        width: 100%;
        background: red;
      }
    }
  }
  .association-footer-container {
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
